<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!--先引入vue.js-->
  <script src="js/vue.js"></script>
</head>

<body>
  <!--VUE 3步-->
  <!--1. 先做界面
  1.1 统一的要求: 界面中所有元素，都必须包裹在一个唯一的父元素下，习惯上<div id="app"></div>
  1.2 找到界面中将来可能随程序自动变化的位置，用专门的语法:{{变量名}}来标记/占位
  本例中：span的内容随程序自动变化
    <span>{{n}}</span>
  1.3 找到界面中将来可能触发事件的元素，用专门的语法: @事件名="事件处理函数名" 来标记
  本例中: 两个按钮会触发事件: 
    +按钮, @click="add"
    -按钮, @click="minus"-->
  <div id="app">
    <button @click="minus">-</button>
    <span>{{n}}</span>
    <button @click="add">+</button>
  </div>

  <script>
    //2. 创建一个new Vue()对象，来监控div所包含的区域。
    var vm=new Vue({
      //vue对象中，必须用el属性，告诉new Vue()要监控的区域是哪里: (el其实是element的缩写)
      el:"#app",//id选择器
      //3. 定义模型对象，来保存界面中所需的所有变量和事件处理函数
      //什么是模型对象: 就是专门替界面保存变量和事件处理函数的特殊的对象
      //3.1 先创建一个data:{}来保存界面中所需的所有变量和初始值
      //本例中: 因为界面上需要一个变量n，所以，data中只有一个变量n即可
      data:{
        n:0
      },
      //3.2 再创建一个methods:{}来保存界面中所需的所有事件处理函数
      //本例中: 界面上一共需要2个事件处理函数
      methods:{
        add(){this.n++},
        minus(){
          if(this.n>0){
            this.n--
          }
        }        
      }
      //强调:
      //3.2.1 methods中的事件处理函数中，如果要操作data中的变量，必须加this.
      //3.2.2 methods中的事件处理函数中，根本不用考虑如何从界面取值，也不用考虑如何将新值放回界面，只需要专门考虑如何把data中的变量值修改正确即可！
      
      //new Vue()会自动保持界面中变量n和data中变量n同步: 
      //开局时，data中n是几，new Vue()就把n的值送到页面上，对应位置显示给人看
      //当methods中修改了n的值，new Vue()会自动把n的新值自动更新到界面中n所在的位置给人看
    });
    console.log(vm);
  </script>
</body>

</html>
